<template>
  <view class="diagnosis-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="一键诊断" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 圆形进度指示器 -->
      <view class="progress-container">
        <view class="progress-circle-wrapper">
          <!-- 背景圆环 -->
          <view class="progress-ring"></view>
          <!-- 进度段 -->
          <view 
            class="progress-segment"
            :style="{ transform: `rotate(${progressAngle}deg)` }"
          ></view>
          <!-- 内圈内容 -->
          <view class="progress-inner">
            <text class="progress-text" v-if="!isCompleted">正在诊断</text>
            <text class="progress-success" v-else>已完成</text>
            <text class="progress-time" v-if="!isCompleted">{{ elapsedTime }}秒</text>
          </view>
        </view>
      </view>
      
      <!-- 说明文字 -->
      <view class="description" v-if="!isCompleted">
        <text class="desc-text">系统正在对您的线路及设备进行检测,请耐心等待! 该项检测内容较多,预计需要1分钟左右。</text>
      </view>
      <view class="description" v-else>
        <text class="desc-text">故障诊断已完成,已生成诊断报告</text>
      </view>
      
      <!-- 检查项列表 -->
      <view class="check-list">
        <view 
          class="check-item" 
          v-for="(item, index) in checkItems" 
          :key="index"
        >
          <text class="check-label">{{ item.label }}</text>
          <view class="check-status">
            <view class="loading-icon" v-if="item.status === 'loading'">
              <view class="loading-spinner"></view>
            </view>
            <view class="success-icon" v-else-if="item.status === 'success'">
              <text class="success-text">安全</text>
              <text class="checkmark">✓</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 诊断结果 -->
      <view class="result-section" v-if="isCompleted">
        <view class="result-header">
          <view class="result-line"></view>
          <text class="result-title">诊断结果</text>
        </view>
        <view class="result-content">
          <!-- 这里可以添加诊断结果的详细内容 -->
          <text class="result-text">所有检查项均正常，未发现异常问题。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'

const navBarHeight = ref(88)
const isCompleted = ref(false)
const elapsedTime = ref(0)
const progress = ref(0)
const timer = ref(null)

// 检查项列表
const checkItems = ref([
  { label: '检查您的账号状态', status: 'loading' },
  { label: '检查您的通信情况', status: 'loading' },
  { label: '检查您的线路状态', status: 'loading' },
  { label: '检查您的终端设备', status: 'loading' },
  { label: '检查您的工单情况', status: 'loading' },
  { label: '检查您的SIM卡状态', status: 'loading' }
])

// 计算进度角度（-90度起始，顺时针旋转到对应进度）
const progressAngle = computed(() => {
  return -90 + (progress.value / 100) * 360
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
  
  // 开始诊断
  startDiagnosis()
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

const startDiagnosis = () => {
  // 模拟诊断过程，10秒完成
  const totalTime = 10 // 总时长10秒
  const startTime = Date.now()
  
  timer.value = setInterval(() => {
    const elapsed = (Date.now() - startTime) / 1000 // 已过时间（秒）
    const currentProgress = Math.min((elapsed / totalTime) * 100, 100)
    
    elapsedTime.value = Math.floor(elapsed)
    progress.value = currentProgress
    
    // 根据进度更新检查项状态
    if (elapsed >= 1 && checkItems.value[0].status === 'loading') {
      checkItems.value[0].status = 'success'
    }
    if (elapsed >= 3 && checkItems.value[1].status === 'loading') {
      checkItems.value[1].status = 'success'
    }
    if (elapsed >= 5 && checkItems.value[2].status === 'loading') {
      checkItems.value[2].status = 'success'
    }
    if (elapsed >= 7 && checkItems.value[3].status === 'loading') {
      checkItems.value[3].status = 'success'
    }
    if (elapsed >= 9 && checkItems.value[4].status === 'loading') {
      checkItems.value[4].status = 'success'
    }
    if (elapsed >= 10 && checkItems.value[5].status === 'loading') {
      checkItems.value[5].status = 'success'
    }
    
    // 诊断完成
    if (elapsed >= totalTime) {
      isCompleted.value = true
      progress.value = 100
      if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
      }
    }
  }, 100) // 每100ms更新一次，让进度条更平滑
}
</script>

<style scoped>
.diagnosis-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  /* background: linear-gradient(180deg, rgba(78, 138, 254, 0.8) 0%, rgba(78, 138, 254, 1) 100%); */
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* 进度指示器 */
.progress-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx 0 40rpx 0;
}

.progress-circle-wrapper {
  position: relative;
  width: 240rpx;
  height: 240rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  border: 16rpx solid rgba(240, 240, 240, 1);
  box-sizing: border-box;
}

.progress-segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  border: 16rpx solid transparent;
  border-top-color:  rgba(78, 138, 254, 1);
  box-sizing: border-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.progress-inner {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  /* background: rgba(255, 255, 255, 1); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.progress-text {
  color: rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 20rpx;
font-weight: 400;
line-height: 24rpx;
  margin-bottom: 16rpx;
}
.progress-success{
  color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
}

.progress-time {
  color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx
}

/* 说明文字 */
.description {
  margin-bottom: 40rpx;
  padding: 0 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.desc-text {
  color: rgba(102, 102, 102, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
  text-align: center;
}

/* 检查项列表 */
.check-list {
  /* background: rgba(255, 255, 255, 0.15); */
  backdrop-filter: blur(10rpx);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

.check-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-radius: 16rpx;
box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
background: rgba(255, 255, 255, 1);
margin-bottom: 24rpx;
}

.check-item:last-child {
  border-bottom: none;
}

.check-label {
 color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
}

.check-status {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.loading-icon {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loading-spinner {
  width: 20rpx;
  height: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner::before {
  content: '⟲';
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
  animation: spin 1s linear infinite;
  display: block;
  line-height: 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.success-icon {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.success-text {
  color: rgba(76, 175, 80, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
}

.checkmark {
  color: rgba(76, 175, 80, 1);
  font-size: 32rpx;
  font-weight: bold;
  line-height: 1;
}

/* 诊断结果 */
.result-section {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10rpx);
  border-radius: 16rpx;
  padding: 32rpx;
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.result-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.result-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.result-text {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
}
</style>

